<template>
    <div class="box">
        <ul>
           <li v-for="(item,key) in foo" :key="key" @click="Info(item,key)">
               <img :src="item.img" alt="" v-show="item.show"><img :src="item.img1" alt="" v-show="!item.show">
               <p>{{item.name}}</p>
           </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:"foo",
    data(){
        return{
            foo:[
                {
                    name:"首页",
                    img:require('../assets/theme-img/home-active.png'),
                    img1:require('../assets/theme-img/home.png'),
                    show:false,
                    rout:"./hom"
                },
                {
                    name:"课程",
                    img:require('../assets/theme-img/course-active.png'),
                    img1:require('../assets/theme-img/course.png'),
                    show:false,
                    rout:"./ke"
                },
                {
                    name:"约课记录",
                    img:require('../assets/theme-img/study-active.png'),
                    img1:require('../assets/theme-img/study.png'),
                    show:false,
                    rout:"./yue"
                },
                {
                    name:"练习",
                   img:require('../assets/theme-img/user-active.png'),
                    img1:require('../assets/theme-img/user.png'),
                    show:false,
                    rout:"./lian"
                },
                 {
                    name:"我的",
                   img:require('../assets/theme-img/user-active.png'),
                    img1:require('../assets/theme-img/user.png'),
                    show:false,
                    rout:"./my"
                }
            ]
        }
    },
    methods:{
        Info(i,k){
            this.$router.push(i.rout)
            for(var i=0;i<this.foo.length;i++){
                if(this.foo[i]!=k){
                    this.foo[i].show=false
                }
            }
            this.foo[k].show=true
            
            
        }
    }

}
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
.box{
    width: 100%;
    height: 52px;
    background:white;
    box-shadow:-5px -5px  5px #fafafa;
     text-align: center;
     position: fixed;
     bottom: 0;
     left: 0;
    ul{
        width: 100%;
        height: 100%;
        display: flex;
        li{
            flex:1;
            padding-top:5px; 
            img{
                width: 20px;
                height: 20px;
            }
            p{
                font-size: 13px;
            }
        }
    }
}
</style>